<template>
    <el-card 
    v-show="tabShow"
    class="info-bottom"
    >
        <el-tabs 
        v-model="tabsActive" 
        ref="reTabs"
        >
            <template v-for="(item ,index) in tabsArr">
                <el-tab-pane 
                v-if="item.isShow" 
                :key="index" 
                :name="item.id" 
                >
                    <div slot="label" class="tab-title">
                        <img :src="item.imgSrc" alt="">
                        <span>&nbsp;{{item.title}}</span>
                    </div>
                </el-tab-pane>
            </template>
        </el-tabs>

        <!-- 该业主其他项目信息 -->
        <div 
        class="left-bottom-item"
        v-show="tabsActive == '1'"
        >
            <auto-list  
                key="other"
                :search="tabsArrComputed[0].search" 
                :required-key="data.guid"
                :action="`${$store.state.api.tbUrl}/noticerelated/yzitems.json`"
                @click="tabsArr[0].onClick"
                @queryEnd="tabsArr[0].onPage" 
                @show="tabsArr[0].onShow"
            ></auto-list>
        </div>

        <!-- 中标人其他信息 -->
        <div 
        class="left-bottom-item" 
        v-show="tabsActive == '2'"
        >
            <auto-list 
                key="winner"
                :search="tabsArrComputed[1].search" 
                :required-key="data.guid"
                :action="`${$store.state.api.tbUrl}/noticerelated/winneritems.json`" 
                @click="tabsArr[1].onClick"
                @queryEnd="tabsArr[1].onPage" 
                @show="tabsArr[1].onShow"
            ></auto-list>
        </div>

        <!-- 候选人投标的项目信息 -->
        <div 
        class="left-bottom-item" 
        v-show="tabsActive == '3'"
        >
            <div style="margin-bottom: 15px">
                <el-radio-group 
                v-model="hxrActiveCompanyName" 
                size="small" 
                >
                    <el-radio-button 
                    size="small" 
                    v-for="(item, ind) in hxr" 
                    :key="ind" 
                    :label="`${item.COMPANY}`"
                    >
                        <span 
                        v-czc="['查公告-详情', '点击按钮' , '切换投标候选人', ind ,`notice-btn-changeBidCandidate`]"
                        >
                            {{item.COMPANY}}
                        </span>
                    </el-radio-button>
                </el-radio-group>
            </div>

            <auto-list 
                key="hxr"
                :search="tabsArrComputed[2].search" 
                :required-key="hxrActiveCompanyName"
                :action="`${this.$store.state.api.tbUrl}/noticerelated/candidateitems.json`" 
                @click="tabsArr[2].onClick"
                @queryEnd="tabsArr[2].onPage" 
            ></auto-list>
        </div>

        <fixed-left-nav 
            v-model="tabsActive"
            :data="tabsArr"
        ></fixed-left-nav>
    </el-card>
</template>

<script>
import FixedLeftNav from '../components/fixed-left-nav.vue';
import AutoList from '../components/auto-list.vue';

import icon1 from '@images/notice/编组1.png';
import icon2 from '@images/notice/编组2.png';

export default {
    components: {
        FixedLeftNav,
        AutoList,
    },
    props: {
        data: {
            type: Object,
            default: () => ({}),
        },
        hxr: {
            type: Array,
            default: () => [],
        },
    },
    data() {
        return {
            tabsActive: '1',

            hxrActiveCompanyName: '',

            tabsArr: [
                {
                    title: '该业主其他项目信息',
                    id: '1',
                    isShow: false,
                    imgSrc: icon1,
                    onShow: () => {
                        this.tabsArr[0].isShow = true;

                        this.$nextTick(() => {
                            this.setDefaultTabActive();
                        });
                    },
                    onClick: (val, index) => {
                        this.setCzc(['查公告-详情', '点击列表' , '业主其他项目信息', index, `notice-list-otherProject`]);

                        this.$emit('click');
                    },
                    onPage: (val) => {
                        this.setCzc(['查公告-详情', '翻页' , '业主其他项目', val.current ,`notice-page-otherProject`]);
                    },
                },
                {
                    title: '该中标公司投标项目信息',
                    id: '2',
                    isShow: false,
                    imgSrc: icon2,
                    onShow: () => {
                        this.tabsArr[1].isShow = true;

                        this.$nextTick(() => {
                            this.setDefaultTabActive();
                        });
                    },
                    onClick: (val, index) => {
                        this.setCzc(['查公告-详情', '点击列表' , '中标公司投标项目信息', index, `notice-list-winCompanyProject`]);

                        this.$emit('click');
                    },
                    onPage: (val) => {
                        this.setCzc(['查公告-详情', '翻页' , '中标单位投标项目', val.current ,`notice-page-winCompanyProject`]);
                    },
                },
                {
                    title: '候选人投标的项目信息',
                    id: '3',
                    isShow: false,
                    imgSrc: icon2,
                    onShow: () => {
                        this.tabsArr[2].isShow = true;

                        this.$nextTick(() => {
                            this.setDefaultTabActive();
                        });
                    },
                    onClick: (val, index) => {
                        this.setCzc(['查公告-详情', '点击列表' , '投标候选人项目信息', index, `notice-list-bidCandidateProject`]);

                        this.$emit('click');
                    },
                    onPage: (val) => {
                        this.setCzc(['查公告-详情', '翻页' , '投标候选投标项目', val.current ,`notice-page-bidCandidateProject`]);
                    },
                },
            ],
        }
    },
    computed: {
        tabsArrComputed() {
            return [
                {
                    title: '该业主其他项目信息',
                    search: {
                        pagesize: 5,
                        sortname: 'publishtime', //addtime
                        sortorder: 'desc',
                        company: this.data.tender,
                        noticename: this.data.notice,
                        noticetype: this.data.noticetype,
                        projectname: this.data.project_name,
                        noticeid: this.data.guid,
                    },
                },
                {
                    title: '该中标公司投标项目信息',
                    search: {
                        pagesize: 5,
                        sortorder: 'desc',
                        sortname: 'a.notice_publish_time',
                        company: this.data.bidder,
                    },
                },
                {
                    title: '候选人投标的项目信息',
                    search: {
                        pagesize: 5,
                        sortorder: 'desc',
                        sortname: 'd.notice_publish_time',
                        company: this.hxrActiveCompanyName,
                    },
                },
            ];
        },
        tabShow() {
            return this.tabsArr.filter(item => item.isShow).length;
        },
    },
    watch: {
        hxr: {
            handler(n) {
                if (n.length) {
                    this.tabsArr[2].onShow();
                }

                this.hxrActiveCompanyName = n[0]?.COMPANY;
            },
            deep: true,
            immediate: true,
        },
    },
    methods: {
        //判断 底部 tabs 样式 ，和默认选中
        setDefaultTabActive() {
            let reTabPanes = this.tabsArr.filter(item => item.isShow);
            
            this.tabsActive = reTabPanes[0]?.id;
        },
    },
    mounted() {
        
    },
}
</script>

<style lang="scss" scoped>
.info-bottom {
    .tab-title {
        display: flex;
        align-items: center;
    }

    ::v-deep {
        .el-card__body {
            padding-top: 6px;
        }

        .el-tabs .el-tabs__header .is-top {
            margin: 0 !important;
        }
        
        .el-radio-button--small .el-radio-button__inner {
            padding: 9px 15px !important;
            font-size: 14px !important;
            border-radius: 0;
        }
    }
}
</style>